<template>
  <div>
    <h1>人气推荐列表</h1>
    <div class="good-wrap">
      <my-goods v-for="item in goodsList" :key="item.id" :item="item" />
      <!-- @click="gotoRecDetail(item.id)" -->
    </div>
  </div>
</template>
<script>
import { getGoodList } from "../../utils/home.js";
import { reactive, toRefs } from "vue";
import myGoods from "../../components/myGoods.vue";
import { useRouter } from "vue-router";

export default {
  setup(props) {
    const router = useRouter();
    const data = reactive({
      goodsList: [],
    });
    getGoodList().then((res) => {
      console.log(res);
      data.goodsList = res.data;
    });
    //不传参就会返回所有的商品的数据

    // const gotoRecDetail = (id) => {
    //   router.push("/recommendDetail/" + id);
    // };
    //跳转详情页 在子组件里跳 这样的话首页那里就不用写了

    return { ...toRefs(data) };
  },
  components: {
    myGoods,
  },
};
</script>
<style lang="scss" scoped>
.good-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  div {
    width: 48%;
  }
}
</style>
